<template>
  <div class="depLine" ref="depLine"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { getStaffManageAPI } from '@/api/staffManageEch.js';
import { onMounted, ref } from 'vue';

const depLine = ref(null);

onMounted(() => {
  depFoo();
});

const depFoo = async () => {
  const res = await getStaffManageAPI();

  console.log(res.data.list);
  var myChart = echarts.init(depLine.value);

  var option;
  var datas = res.data.list;
  option = {
    title: {
      text: '员工管理',
    },
    series: datas.map(function (data, idx) {
      var top = idx * 50;
      return {
        type: 'pie',
        radius: [20, 60],
        top: top + '%',
        height: '50%',
        left: 'center',
        width: 400,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{c}}%',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999',
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        labelLayout: function (params) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points,
          };
        },
        data: data,
      };
    }),
  };

  option && myChart.setOption(option);
};
</script>

<style scoped lang="less">
.depLine {
  width: 100%;
  height: 100%;
}
</style>
